<template>
	<view>
		<view class="share_top" :style="{paddingTop: systemBarHeight + 'px'}">
			<view class="top_box">
				<image  @click="back()" src="../../../static/left1.png" mode=""></image>
				<view class="tit">推广套餐</view>
			</view>
		</view>
		<!-- 总数量显示 -->
		<view class="all_box">
			<view class="box">
				<text class="tit">推广金额</text>
				<text class="num">{{tj.sum_price}}</text>
			</view>
			
			<view class="box">
				<text class="tit">推广单量</text>
				<text class="num">{{tj.order_count}}</text>
			</view>
			
			<view class="box" >
				<text class="tit">推广人数</text>
				<text class="num">{{tj.p_num}}</text>
			</view>
			
			<view class="box" @click="subordinate_nav()">
				<text class="tit">我的下级</text>
				<text class="num">{{child_num}}</text>
			</view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search_box">
			<view class="search_img">
				<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/9616de5fd2f72e4c639ee1295f861eb564f7e690.png" mode=""></image>
			</view>
			<input  type="text" placeholder="输入用户ID/昵称" placeholder-style="font-size: 25rpx; color: #BCBCBC"    v-model="keyword">
			<view class="btn" @click="doSearch">
				搜索
			</view>
		</view>
		
		<!-- 推广套餐的列表 -->
		<view class="share_list" v-for="(item,index) in orders_list" :key="index"  v-if="orders_list.length > 0">
			<view class="share_tops">
				<view class="top">
					<image :src="item.u_avatar" mode=""></image>
					<text>{{item.u_nickname}}</text>
				</view>
				<text>订单号：{{item.order_sn}}</text>
			</view>	
			<view class="share_cont">
				<view class="cont_img">
					<image :src="item.orderItem[0].g_pic" mode=""></image>
				</view>
				<view class="cont_text">
					<view class="tit">
						{{item.orderItem[0].goodname}}
					</view>
					<view class="box">
						<text class="money">¥{{item.orderItem[0].price}}</text>
						<text class="num">x{{item.orderItem[0].nums}}</text>
					</view>
				</view>
			</view>
			<view class="bot">
				<text class="time">{{formatDate(item.paytime)}}</text>
				<text class="texts">共{{item.orderItem[0].nums}}件商品，实付：<text class="moneys">¥{{item.pay_money}}</text></text>
			</view>
		</view>	
		
		
		<view class="no_box" v-if="orders_list.length == 0">
			<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/f9bede86ecf6777ae86c83afe8c3747d9693e80f.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				systemBarHeight: '',
				keyword: '',
				orders_list: '',
				tj: '',
				child_num: 0
			};
		},
		onLoad() {
			this.getSysteminfo()
			this.order_list()
			this.share_tj()
			this.getUserInfo()
		},
		methods:{
			/* 获取用户信息 */
			getUserInfo(){
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						that.child_num = res.data.childNum
					}
				}).catch(err => {
				
				})
			},
			
			// 我的下级
			subordinate_nav(){
				uni.navigateTo({
					url: '/pages/user/my_subordinate/my_subordinate'
				})
			},
			// 推广统计
			share_tj(){
				let that = this;
				app.globalRequest({
					api: app.getApi().mall.dividend_statistics,
					method: 'get'
				}).then(res => {
					if (res.code == 0) {
						that.tj = res.data
					}
				}).catch(err => {
				
				})
			},
			
			// 时间戳转化为时间
			formatDate(str){
			    str = str*1000        //时间戳化成毫秒单位
			    let date = new Date(str);        //获取系统时间
			    let year = date.getFullYear();
			    let month= date.getMonth() + 1;
			    month= month< 10 ? ('0' + month) : month;
			    let day = date.getDate();
			    day = day < 10 ? ('0' + day ) : day ;
			    let h = date.getHours();
			    h = h < 10 ? ('0' + h) : h;
			    let m = date.getMinutes();
			    m = m < 10 ? ('0' + m) : m;
			    let s = date.getSeconds();
			    s = s < 10 ? ('0' + s) : s;
			    //  + ' ' + h + ':' + m + ':' + s;
			    return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s
			},
			// 订单列表
			order_list(){
				let that = this;
				app.globalRequest({
					api: app.getApi().mall.dividendOrderList,
					data: {
						keyword: that.keyword
					},
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						that.orders_list = res.data
					}
				}).catch(err => {
				
				})
			},
			
			// 返回的
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 搜索条件
			doSearch:function(){
				if( this.keyword == '0' ){
					uni.showToast({
						title: '搜索用户ID不可为0',
						icon:'none'
					})
					return
				}else if(this.keyword == '' || this.keyword != ''){
					this.order_list()
				}
			},
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight+10;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		padding: 0 0  30rpx;
		box-sizing: border-box;
		background-color: #F5F5F5;
	}
	.share_top{
		width: 100%;
		height: 338rpx;
		background: url('https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/2ea670bf5c0aec7c1205641a74e5f2e746055e07.png');
		background-position: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 32rpx;
		box-sizing: border-box;
		.top_box{
			display: flex;
			align-items: center;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			.tit{
				color: #fff;
				font-size: 35rpx;
				width: 90%;
				text-align: center;
			}	
		}
	}
	.all_box{
		// width: 100%;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 8rpx;
		margin: -130rpx 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.box{
			display: flex;
			flex-direction: column;
			align-items: center;
			.tit{
				color: #111111;
				font-size: 29rpx;	
			}
			.num{
				font-size: 29rpx;
				color: #EC1818;
				font-weight: bold;
				margin-top: 12rpx;
			}
		}
	}
	
	.search_box{
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;
		// margin-bottom: 24rpx;
		position: relative;
		background-color: #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		input{
			width: 83%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: #fff;
			padding-left: 80rpx;
			box-sizing: border-box;
		}
		.btn{
			background-color: #EC1818;
			color: #fff;
			font-size: 24rpx;
			border-radius: 32rpx;
			padding: 10rpx 20rpx;
			margin-left: 20rpx;
			box-sizing: border-box;
		}
		.search_img{
			position: absolute;
			top: 30%;
			left: 4%;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			// background-color: #F7F7F7;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.share_list{
		margin: 24rpx 24rpx 0;
		padding: 22rpx 24rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		background-color: #fff;
		.share_tops{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.top{
				display: flex;
				align-items: center;
				width: 40%;
				image{
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
				text{
					margin-left: 22rpx;
					font-size: 25rpx;
					color: #303133;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 60%;
				}
			}
			text{
				font-size: 25rpx;
				color: #303133;
			}
		}
		.share_cont{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cont_img{
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.cont_text{
				width: 77%;
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.tit{
					font-size: 27rpx;
					color: #333333;
					overflow:hidden; 
					text-overflow:ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2; 
				}
				.box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						color: #303133;
						font-size: 25rpx;
					}
				}
			}
		}
		.bot{
			margin-top: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.time{
				font-size: 25rpx;
				color: #303133;
				margin-top: 5rpx;
			}
			.texts{
				color: #333333;
				font-size: 27rpx;
				.moneys{
					font-size: 33rpx;
					color: #303133;
					font-weight: bold;
				}
			}
		}
	}
	
	.no_box{
		width: 520rpx;
		height: 430rpx;
		margin: 200rpx auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
